<!DOCTYPE html>
<html class="height-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<title>注册</title>
<link rel="stylesheet" href="../css/style.css" />
<script src="js/jquery.js"></script>

<!-- <script src="../js/jquery-2.1.1.js"></script>  -->
<style>
.height-100 {
	height: 100%;
}

body.height-100 {
	padding-bottom: 240px;
	min-height: 958px;
	position: relative;
}

.page-footer.bd-con-lty {
	height: 240px;
	position: absolute;
	bottom: 0;
	width: 100%;
}
.headline{
	display:flex;     
	justify-content: center;
	font-size: 24px;
	

}
</style>
<!-- <style type="text/css">
.form-tips{
	color:red;
	display:none;
}

</style> -->
</head>
<body class="bgcolor-f6f5fa height-100">
	<div class="page-header">
		<script>
			window.IS_UC_PAGE_ = true; //用户中心页面标识
		</script>
	</div>
	<div class="page-con" style="padding: 70px 0 30px;">
		<div class="md-2018040401-ll" id="md_2018040401_ll"
			style="margin: 0 auto;">
			<div class="login-inp-box" id="login_inp_box">
				<div class="tab-header">
					<h3 class="headline">欢迎注册懒虫商城</h3>
					<ul class="clearfix">
						<li class="active" data-module="tab"
							data-target="md_2018040401_ll_tab1">手机注册</li>
						<!-- <li data-module="tab" data-target="md_2018040401_ll_tab2">邮箱注册</li> -->
					</ul>
				</div>
				<div class="tab-cont">
					<div class="tab-item active" id="md_2018040401_ll_tab1">
						<form autocomplete="off">
							<div id="js_reg_phone_form" class="form-ele-box">
								<div class="form-item clearfix">
									<div class="form-inp-area">
										<span>请输入手机号</span>
										<input id="js_account_phone" class="form-input"
											cusrule="phone" value="" type="text" placeholder="手机号">
										<span class="form-tips" id="telError">手机号格式错误</span>
									</div>
								</div>
								<div class="form-item clearfix">
									<div class="form-inp-area">
										<span>请输入用户名</span>
										<input id="js_account_name" class="form-input"
											cusrule="name" value="" type="text" placeholder="用户名">
										<span class="form-tips" id="nameError">用户名格式错误</span>
									</div>
								</div>
								<div class="form-item clearfix">
									<div class="form-inp-area">
										<span>请输入密码</span>
										<input id="js_pwd" class="form-input" cusrule="pwd_phone"
											value="" type="password" placeholder="密码">
											 <span class="form-tips">包含数字、字母、下划线的6-18位</span>
									</div>
								</div>
								<div class="form-item clearfix">
									<div class="form-inp-area">
										<span>请再次输入密码</span>
										<input id="js_pwd2" class="form-input" cusrule="equalTo"
											equalTo="js_pwd_phone" value="" type="password"
											placeholder="确认密码"> <span class="form-tips" id="psword_error">密码不一致</span>
										
									</div>
								</div>
								<!-- <div class="form-item clearfix">
									<div class="form-inp-area">
										<input id="js_imgcode_phone" class="form-input pull-left" cusrule="code_en" cuslength="4" value="" type="text" placeholder="验证码" style="width: 80px; margin-right: 15px;">
										<img id="js_validate_img" class="pull-left code-img js-validate-img" src="" height="40px" width="80px" style="cursor: pointer; margin-right: 15px;">
										<div class="form-inlineblock pull-left code-btn js-validate-img">
											<span class="verflag" style="cursor: pointer;">看不清楚？换一张</span>
											<i class="verflag"></i>
										</div>
										<span class="form-tips">验证码错误</span>
									</div>
								</div> -->
								<div class="form-item clearfix">
									<span>请输入验证码</span>
									<div class="form-inp-area">
										
										<input id="js_dy_code_phone" class="form-input pull-left"
											cusrule="required" value="" type="text" placeholder="获取验证码"
											style="width: 200px;"> <span class="form-tips">动态码错误</span>
									</div>
									<button id="js_DynamicCodePhone"
										class="form-btn form-btn-blue pull-right" type="button">获取动态码</button>
								</div>
								<div class="form-item clearfix">
									<button id="js_submit_reg_phone"
										class="form-btn form-btn-blue width-100" type="submit">注册</button>
								</div>
							</div>
						</form>
					</div>
					<!-- <div class="tab-item" id="md_2018040401_ll_tab2">
						<form autocomplete="off" class="form">
							<div id="js_reg_mail_form" class="form-ele-box">
								<div class="form-item clearfix">
									<div class="form-inp-area">
										<input id="js_account_mail" class="form-input" cusrule="mail"
											value="" type="text" placeholder="邮箱"> <span
											class="form-tips">邮箱格式错误</span>
									</div>
								</div>
								<div class="form-item clearfix">
									<div class="form-inp-area">
										<input id="js_name_mail" class="form-input" cusrule="nickname" value="" type="text" placeholder="昵称"> 
										<span class="form-tips">包含中文、数字、字母、下划线的4-12位</span>
									</div>
								</div>
								<div class="form-item clearfix">
									<div class="form-inp-area">
										<input id="js_pwd" class="form-input" cusrule="pwd"
											value="" type="password" placeholder="密码"> <span
											class="form-tips">包含数字、字母、下划线的6-18位</span>
									</div>
								</div>
								<div class="form-item clearfix">
									<div class="form-inp-area">
										<input id="js_pwd_mail2" class="form-input" cusrule="equalTo"
											equalTo="js_pwd_mail" value="" type="password"
											placeholder="确认密码"> <span class="form-tips">密码不一致</span>
									</div>
								</div>
									<div class="form-item clearfix">
									<div class="form-inp-area">
										<input id="js_imgcode_mail" class="form-input pull-left" cusrule="code_en" cuslength="4" value="" type="text" placeholder="验证码" style="width: 80px; margin-right: 15px;">
										<img id="js_validate_img_m" class="pull-left code-img js-validate-img" src="" height="40px" width="80px" style="cursor: pointer; margin-right: 15px;">
										<div class="form-inlineblock pull-left code-btn js-validate-img">
											<span class="verflag" style="cursor: pointer;">看不清楚？换一张</span>
											<i class="verflag"></i>
										</div>
										<span class="form-tips">验证码错误</span>
									</div>
								</div>
								<div class="form-item clearfix">
									<div class="form-inp-area">
										<input id="js_dy_code_mail" class="form-input pull-left"
											cusrule="required" value="" type="text" placeholder="动态验证码"
											style="width: 200px;"> <span class="form-tips">动态码错误</span>
									</div>
									<button id="js_DynamicCodeEmail"
										class="form-btn form-btn-blue pull-right" type="button">获取动态码</button>
								</div>
								<div class="form-item clearfix">
									<button id="js_submit_reg_mail"
										class="form-btn form-btn-blue width-100" type="button">注册</button>
								</div>
							</div>
						</form>
					</div> -->
					<div class="form-item clearfix">
						<div class="form-checkbox pull-left">
							<input type="checkbox" id="js_form_user_regyx" checked="checked">
							<span>我已阅读并同意 <a id="user_agreement" target="_blank"
								class="text-danger color-red"> 《用户注册协议》 </a>
							</span>
						</div>
						<div class="pull-right" style="padding-top: 2px;">
							已有账号？ <a id="login"> <i class="text-info color-blue">立即登录</i>
							</a>
						</div>
					</div>
				</div>

			</div>

		</div>
	</div>
	<!-- <script  src="../js/app.js"></script>  -->
		<script>
            
            
         /*    // tab 标签切换
            //$('#md_2018040401_ll').cusTab({opt:111});
            //输入框和二维码切换
            $('#md_2018040401_ll .t-icon-btn').click(function(){ 
                $('#'+ $(this).data('target')).show();
                $(this).parent().hide();
                if($(this).data('target') == 'login_imgcode_box'){ //打开二维码
                    showEwm();
                }
                refreshValidateImg && refreshValidateImg();
            });*/
            
           /*  initRegisterFn(); */
             
            
           

        </script> 

	<script type="text/javascript">
       
        $(document).ready(function(){
			$("#user_agreement").click(function(){
				location.href="/userAgreement"
			});
			$("#login").click(function(){
				location.href="/login2"
			});
			$("#js_account_phone").on("blur", dovalidatePhone);
        	/* $("form")
       	 		.on("click","button[type=submit]",doSaveOrUpdate);  */
       	 		/* .on("click",".width-100width-100",doSaveOrUpdate); */
        }); 
         function doCancel(){
        	 location.href="/login2"
        	 }
        function doSaveOrUpdate(){
        	
       	 //1.url
       	 var insertUrl="/doSaveObject";
       	 //2.获取表单数据
       	 var params=doGetEditFormData();
       	
       	 //3.发起异步请求
       	 $.post(insertUrl,params,function(result){
       		 if(result.status==1){
       			 alert(result.message);
       			 doCancel();
       		 }else{
       			
       			 alert(result.message);
       			 
       		 }
       	 })
        }
        //获取表单数据
        function doGetEditFormData(){
        	
       	 var params={
       	      "username":$("#js_account_name").val(),
       	      "password":$("#js_pwd").val(),
       	      //"email":$("#js_account_mail").val(),
       	      "phone":$("#js_account_phone").val(),
                 
       	 }
       	
       	 
       	 return params;
       	 
        }
        //确认用户名是否重复
        function dovalidateUsername(){
          	 //1.url
          	 var insertUrl="/dovalidateUsername";
          	 //2.获取表单数据
          	 var params={"username":$("#js_account_name").val(),
          				 
          	 }
          	 //3.发起异步请求
          	 $.post(insertUrl,params,function(result){
          		console.log(result)
	          		 if(result.status==1){
	          		
	          			
	          		 }else{
	          			 alert(result.message);
	          			 
	          		 }
          		 
          	 });
           }

        //校验手机号格式是否正确,是否重复
        function dovalidatePhone(){
			//let jsDynamicCodePhone=document.getElementById("js_DynamicCodePhone"),
			//获取验证码
			//js_dy_code_phone = document.getElementById("js_dy_code_phone"),
			/* js_dy_code_mail = document.getElementById("js_dy_code_mail"), */
			//获取手机号
			var tel = document.getElementById("js_account_phone");
			//获取邮箱号
			// mail = document.getElementById("js_account_mail"),
			//获取手机号错误提示
			var telError = document.getElementById("telError");

			//手机号正则
			var telReg = /^1[0-9]\d{9}$/;
			//短信正则
			//verificationCodeReg = /^[0-9]\d{3}$/,
			//time=30;
			//校验手机号格式
			if (telReg.test(tel.value)) { //格式正确判断该手机号是否已注册
				telError.style.display = "none";
				//1.url
				var insertUrl="/dovalidatePhone";
				//2.获取表单数据
				var params={
					"phone":$("#js_account_phone").val(),
				}
				//3.发起异步请求
				$.post(insertUrl,params,function(result){
					console.log(result)
					if(result.status==1){

					}else{
						$(telError).text(result.message);
						telError.style.display = "block";
					}
				});
			} else {
				telError.style.display = "block";
				return;
			}
           }
       
        

			
			
			/**2.发送验证码倒计时*/
			jsDynamicCodePhone.onclick=function settime(){
				
				if(time==0){
					jsDynamicCodePhone.removeAttribute("disabled",);
					jsDynamicCodePhone.innerHTML="获取验证码";
					time=30;
					return;
				}else{
					jsDynamicCodePhone.setAttribute("disabled",true);
					jsDynamicCodePhone.innerHTML=time+"秒后再获取";
					time--;	
				}
				setTimeout(function(){
					settime(jsDynamicCodePhone)
				},1000);
				
			}
			/**校验密码*/
			
			js_dy_code_phone.onclick=function verify(){
				validate()
			}
			js_pwd.onclick=function verifyusernames(){
				dovalidateUsername()
			}
			
			function validate() {
   				 var pwd1 = document.getElementById("js_pwd").value;
   				 var pwd2 = document.getElementById("js_pwd2").value;
 
				<!-- 对比两次输入的密码 -->
   				 if(pwd1 == pwd2){
   					psword_error.style.display = "none";
   					pswordtrue();
    			 }else {
    				 psword_error.style.display = "block";
    				
 			    	}
				}
			function pswordtrue(){
				$("form")
       	 		.on("click","button[type=submit]",doSaveOrUpdate);
			}
        
	</script>
</body>
</html>